$(function () {
    $("#jqGrid").jqGrid({
        url: '../videostream/list',     // 请求后台json数据的url
        datatype: "json",                // 后台返回的数据格式
        // 列表标题及列表模型
        colModel: [
            {label: 'id', name: 'id', index: 'id', width: 20, key: true},
            // {label: '会议名称', name: 'confname', index: 'conFName', width: 80 },
            // {label: '流水号', name: 'callflowid', index: 'callFlowId', width: 80 },
            {label: '会议ID', name: 'confid', index: 'conFid', width: 50},
            {label: '视频地址', name: 'recordurl', index: 'recordUrl', width: 160, formatter: customFmatter},
            // {label: '缩略图', name: 'thumbnail', index: 'thumbnail', width: 80 },
            {label: '工单ID', name: 'orderid', index: 'orderId', width: 40},
            // {label: '公司ID', name: 'companyid', index: 'companyId', width: 80 },
            // {label: '拨号模式', name: 'callmode', index: 'callMode', width: 80 },
            {label: '创建时间', name: 'createdtime', index: 'createdTime', width: 40},
            // {label: '修改时间', name: 'editedtime', index: 'editedTime', width: 80 },


            // {label: '会议结果', name: 'result', index: 'result', width: 80 }
        ],
        viewrecords: true,     // 是否显示行号，默认值是false，不显示
        height: 385,            // 表格高度
        rowNum: 50,             // 一页显示的行记录数
        rowList: [50, 100],     // 翻页控制条中 每页显示记录数可选集合
        rownumbers: true,
        rownumWidth: 25,
        autowidth: true,
        multiselect: true,
        pager: "#jqGridPager",          // 翻页DOM
        jsonReader: {                   // 重写后台返回数据的属性
            root: "page.list",          // 将rows修改为page.list
            page: "page.currPage",      // 将page修改为page.currPage
            total: "page.totalPage",    // 将total修改为page.totalPage
            records: "page.totalCount"  // 将records修改为page.totalCount
        },
        prmNames: {              // 改写请求参数属性
            page: "page",
            rows: "limit",
            order: "order"
        },
        gridComplete: function () {
            //隐藏grid底部滚动条
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
            //设置高度
            $("#jqGrid").jqGrid('setGridHeight', getWinH());
        }
    });
    player = videojs("videoId", {
        controls: true,
        autoplay: true,
        preload: 'auto',
        loop: true
    });
});
var player;

var vm = new Vue({
    el: '#rrapp',
    data: {
        showList: true,
        title: null,
        videostream: {}
    },
    methods: {
        query: function () {
            //vm.reload();
            $("#jqGrid").jqGrid('setGridParam', {
                postData: {
                    keyword: $("#keyword").val()
                },
                page: 1
            }).trigger("reloadGrid");
        },
        add: function () {
            vm.showList = false;
            vm.title = "新增";
            vm.videostream = {};
        },
        update: function (event) {
            var id = getSelectedRow();
            if (id == null) {
                return;
            }
            vm.showList = false;
            vm.title = "修改";

            vm.getInfo(id)
        },
        saveOrUpdate: function (event) {
            var url = vm.videostream.id == null ? "../videostream/save" : "../videostream/update";
            $.ajax({
                type: "POST",
                url: url,
                data: JSON.stringify(vm.videostream),
                success: function (r) {
                    if (r.code === 0) {
                        alert('操作成功', function (index) {
                            vm.reload();
                        });
                    } else {
                        alert(r.msg);
                    }
                }
            });
        },
        del: function (event) {
            var ids = getSelectedRows();
            if (ids == null) {
                return;
            }

            confirm('确定要删除选中的记录？', function () {
                $.ajax({
                    type: "POST",
                    url: "../videostream/delete",
                    data: JSON.stringify(ids),
                    success: function (r) {
                        if (r.code == 0) {
                            alert('操作成功', function (index) {
                                $("#jqGrid").trigger("reloadGrid");
                            });
                        } else {
                            alert(r.msg);
                        }
                    }
                });
            });
        },
        getInfo: function (id) {
            $.get("../videostream/info/" + id, function (r) {
                vm.videostream = r.videostream;
                //更新输入框高度
                autosize.update($('textarea'));
            });
        },
        reload: function (event) {
            vm.showList = true;
            var page = $("#jqGrid").jqGrid('getGridParam', 'page');
            $("#jqGrid").jqGrid('setGridParam', {
                page: page
            }).trigger("reloadGrid");
        }
    }
});


//播放视频
function playVideo(url) {
    url = decodeURIComponent(url);
    // url = "http://122.112.226.39:8082/topvisionupload/b.3gp";
    var index = url.lastIndexOf("\/");
    var fileName = url.substring(index + 1, url.length);
    //设置播放源
    $("#sourceVideo").attr("src", url);
    var d = dialog({
        title: fileName,
        content: document.getElementById("videoId"),
    });
    //关闭事件
    $(".ui-dialog-close").click(function () {
        player.pause();
    });
    //重置video的src
    player.src({
        src: url,
        type: 'video/mp4'
    });
    //使video重新加载
    player.load(url);
    player.play();
    d.showModal();
}


//自定义格式化内容
function customFmatter(cellvalue, options, rowObject) {
    return '<a href="javascript:void(0)" onclick="playVideo(\''
        + encodeURIComponent(rowObject.recordurl)
        + '\')">' + rowObject.recordurl + '</a>';
}


var resetVideoSize = function (myPlayer) {
    var videoJsBoxWidth = $(".video-js").width();
    var ratio = 1440 / 900;
    var videoJsBoxHeight = videoJsBoxWidth / ratio;
    myPlayer.height(videoJsBoxHeight);
}
// textarea 高度自动扩展
autosize($('textarea'));